<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>04.下拉列表</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.container{
			width: 200px;
			height: 200px;
			margin: 20px auto;
		}
		.container div{
			width: 200px;
			height: 50px;
			border: 1px solid #eee;
			color: #999;
			text-align: center;
			line-height: 50px;
		}
		.container div:hover{
			background-color: #eee;
		}
		.container ul{
			display: none;
		}
		.container li:hover{
			background-color: #eee;
		}
		.container li{
			list-style-type: none;
			width: 200px;
			height: 50px;
			border: 1px solid #eee;
			color: #999;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div id="btn">Dropdown</div>
		<ul id="list">
			<li id="first">洪在烈</li>
			<li id="second">朴玄硕</li>
			<li id="third">李恩泰</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	$('btn').onOff=false;
	$('btn').onclick=function(){
		if($('btn').onOff==false){
			$('list').style.display='block';
			$('btn').onOff=true;
		}else{
			$('list').style.display='none';
			$('btn').onOff=false;
		}
	}
	$('first').onclick=function(){
		$('btn').innerText=$('first').innerText;
		$('list').removeChild(this);
	}
		$('second').onclick=function(){
		$('btn').innerText=$('second').innerText;
		$('list').removeChild(this);
	}
		$('third').onclick=function(){
		$('btn').innerText=$('third').innerText;
		$('list').removeChild(this);
	}
</script>
</html>